<style>
#fsFilterValues{
padding: 5px;
width: 520px;
}
#fsFilterValues legend{
	font-weight: bold;
font-style: italic;
color: #4c4c4c;
padding: 5px;
}
#fsFilterValues select{
	width: 150px;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
	$("#frmCreateProduct").submit(function(){
		var msg = "";
		if($("#title").attr("value") == ""){
			msg+= "Thiếu tên sản phẩm.\n";
		}
		if($("#price").attr("value") == ""){
			msg+= "Thiếu thông tin giá cả.\n";
		}
		if($("#slug").attr("value") == ""){
			msg+= "Thiếu url hiển thị.\n";
		}

		if($("#category_id").attr("value") == 0){
			msg+= "Chưa chọn hạng mục sản phẩm.";
		}
		if(msg != ""){
			alert(msg);
			return false;
		}
	});
	//điền slug
	$("#name").focusout(function(){
		$("#slug").attr("value",getSlug($(this).attr("value")));
	});
	//khi ấn nút thêm ảnh
	$("#btnAddImage").click(function(){
		//đếm số ảnh hiển thị đang có
		var arrImages = $("#images .displayed");
		if(arrImages.length < 4){
			$(".image-"+(arrImages.length+1)).css("display","").addClass("displayed");
		}else{
			alert("Hệ thống chỉ cho phép thêm 4 ảnh cho 1 sản phẩm!");
		}
	});
	//khi nhấn nút xóa ảnh
	$(".btnDeleteImage").click(function(){
		$(this).parent().css("display", "none").removeClass("displayed");
		$(this).next().attr("value","");
	});
	//load dữ liệu khi vào trang
	$.ajax({
		url: "<?php echo $this->url(array(), "admin_ajax_filters"); ?>",
		data: "cat_id="+ <?php echo $this->product->category_id;?> + "&product_id="+<?php echo $this->product->id;?>,
		type: "GET",
		dataType: "html",
		success: function(data){
			$("#fsFilterValues").css("display","");
		     $("#fsFilterValues").html(data);
		   }
					
		
	});
	//mỗi lần chọn thể loại thì lấy bộ lọc
	$("#category_id").change(function(){
		$.ajax({
			url: "<?php echo $this->url(array(), "admin_ajax_filters"); ?>",
			data: "cat_id="+ $(this).attr("value")+ "&product_id="+<?php echo $this->product->id;?>,
			type: "GET",
			dataType: "html",
			success: function(data){
				$("#fsFilterValues").css("display","");
			     $("#fsFilterValues").html(data);
			   }
		});
	});
});

</script>
<div id="r-heading">
	<img src="<?php echo PUBLIC_URL.'/admin/images/product.png';?>" alt=""/>
	<span>Chỉnh sửa thông tin sản phẩm</span>
</div>
<?php
//nếu có message thì hiển thị
if(!empty($this->message)){
	echo '<div id="message">'.$this->message.'</div>';
} 
?>
<form id="frmCreateProduct" action ="" method="post">
	<div class="r-left" style="width: 70%; float: left;">

		<div class="row">
			<label for="title">Tên sản phẩm<span style="color:red;">(*)</span></label>
			<input type="text" id="title" name="title" size="50" value="<?php echo $this->product->title;?>"/>
		</div>
		<div class="row">
			<label for="slug" >Url Hiển thị<span style="color:red;">(*)</span></label>
			<input readonly="readonly" type="text" id="slug" name="slug" size="50" value="<?php echo $this->product->slug;?>"/>
		</div>
		<div class="row">
			<label for="man_id" >Hạng mục sản phẩm<span style="color:red;">(*)</span></label>
			<select style="width: 200px;" name="category_id" id="category_id">
				<option value="0">Chọn một hạng mục</option>
				<?php
				foreach ($this->arrCategories as $category){
					($category->id == $this->product->category_id) ? $selected = " selected='selected' " : $selected ="";
					echo "<option ".$selected." value='". $category->id. "'>". $category->name. "</option>";
				} 
				?>
			</select>
		</div>
		<div class="row">
			<label for="user_id" >Người bán<span style="color:red;">(*)</span></label>
			<select style="width:200px;" name="user_id" id="user_id">
				<option value="0">Chọn người bán</option>
				<?php
				foreach ($this->arrSalesPersons as $salesPerson){
					($salesPerson->id == $this->product->user_id) ? $selected = " selected='selected' " : $selected ="";	
						echo "<option ".$selected." value='". $salesPerson->id. "'>". $salesPerson->fullname. "</option>";
				} 
				?>
			</select>
		</div>
		<div class="row">
			<label for="price" >Giá sản phẩm<span style="color:red;">(*)</span></label>
			<input type="text" id="price" name="price" size="50" value="<?php echo $this->product->price;?>"/>
		</div>
		<div class="row">
			<label for="featured" >Sản phẩm nổi bật:</label>
			<input type="checkbox" id="featured" name="featured" value="1" <?php if($this->product->featured == 1){?>checked="checked" <?php };?>">
		</div>
		<div class="row">
			<label for="page_title" >Tiêu đề trang</label>
			<textarea style="width: 323px;" id="page_title" name="page_title"><?php echo $this->product->page_title;?></textarea>
		</div>
		<div class="row">
			<label for="page_description" >Mô tả trang ( thẻ description)</label>
			<textarea style="width: 323px;" id="page_description" name="page_description"><?php echo $this->product->page_description;?></textarea>
		</div>
		
		<div class="row">
			<label for="tag" >Tag</label>
			<input type="text" id="tag" name="tag" size="50" value="<?php echo $this->product->tag;?>"/>
		</div>
		<div class="row">
			<label for="summary" >Mô tả sản phẩm</label>
			<textarea id="summary" name="summary"><?php echo $this->product->summary;?></textarea>
		</div>
		<div class="row">
			<label style="float: none;" for="content" >Thông số kỹ thuật</label>
			<textarea id="content"" name="content"><?php echo $this->product->content;?>
			</textarea>
		</div>
		
		<script type="text/javascript">
			CKEDITOR.replace("content");
			function BrowseServer(id)
			{
	
				// You can use the "CKFinder" class to render CKFinder in a page:
				var finder = new CKFinder() ;
				finder.basePath = '<?php echo PUBLIC_URL."/ckfinder/";?>' ;	// The path for the installation of CKFinder (default = "/ckfinder/").
				
				finder.selectActionFunction = function(fileUrl){
					
					document.getElementById("hdImage-"+id ).value = fileUrl ;
					document.getElementById('imgFeature-'+ id ).src = fileUrl;
					
				}
				finder.popup() ;
	
				
			}
			
		</script>
	</div>

	<div class="r-right" style="width: 25%; float: right;">
		<div class="box">	
			<div class = "b-title">	
				Ảnh đại diện
			</div>
			<div class="b-container">
				<div id="images">
					<?php
						$arrImages = explode('@', $this->product->feature_image);
					?>
					<div class="image-1 displayed">
						<img src="<?php echo $arrImages[0];?>" width="100%" id="imgFeature-1" alt="Ảnh đại diện"/>
						<input class="btnSelectImage button" type="button" onclick="BrowseServer(1);" value="Chọn ảnh"/>
						<input type="hidden" name="image[]" value="<?php echo $arrImages[0];?>" id="hdImage-1"/>
					</div>
					<?php
					if($arrImages[1] != ""){?>
					<div class="image-2 displayed">
						<img src="<?php echo $arrImages[1];?>" width="100%" id="imgFeature-2" alt="Ảnh đại diện"/>
						
					<?php }else{?>
					<div class="image-2" style="display: none;">
						<img src="<?php echo PUBLIC_URL."/admin/images/article_default.jpg";?>" width="100%" id="imgFeature-2" alt="Ảnh đại diện"/>
					<?php }?>
						<input class="btnSelectImage button" type="button" onclick="BrowseServer(2);" value="Chọn ảnh"/>
						<input class="btnDeleteImage button" type="button" value="Xóa ảnh"/>
						<input type="hidden" name="image[]" value="<?php echo $arrImages[1];?>" id="hdImage-2"/>
					</div>
					<?php
					if($arrImages[2] != ""){?>
					<div class="image-3 displayed">
						<img src="<?php echo $arrImages[2];?>" width="100%" id="imgFeature-3" alt="Ảnh đại diện"/>
					
					<?php }else{?>
					<div class="image-3" style="display: none;">
						<img src="<?php echo PUBLIC_URL."/admin/images/article_default.jpg";?>" width="100%" id="imgFeature-3" alt="Ảnh đại diện"/>
					<?php }?>
						<input class="btnSelectImage button" type="button" onclick="BrowseServer(3);" value="Chọn ảnh"/>
						<input class="btnDeleteImage button" type="button" value="Xóa ảnh"/>
						<input type="hidden" name="image[]" value="<?php echo $arrImages[2];?>" id="hdImage-3"/>	
					</div>
					<?php
					if($arrImages[3] != ""){
					?>
					<div class="image-4 displayed">
						<img src="<?php echo $arrImages[3];?>" width="100%" id="imgFeature-4" alt="Ảnh đại diện"/>
					<?php	
					}else{ 
					?>
					<div class="image-4" style="display: none;">
						<img src="<?php echo PUBLIC_URL."/admin/images/article_default.jpg";?>" width="100%" id="imgFeature-4" alt="Ảnh đại diện"/>
					<?php }?>
						<input class="btnSelectImage button" type="button" onclick="BrowseServer(4);" value="Chọn ảnh"/>
						<input class="btnDeleteImage button" type="button" value="Xóa ảnh"/>
						<input type="hidden" name="image[]" value="<?php echo $arrImages[3];?>" id="hdImage-4"/>
					</div>
					<?php
					if($arrImages[4] != ""){
					?>
					<div class="image-5 displayed">
						<img src="<?php echo $arrImages[3];?>" width="100%" id="imgFeature-5" alt="Ảnh đại diện"/>
					<?php	
					}else{ 
					?>
					<div class="image-5" style="display: none;">
						<img src="<?php echo PUBLIC_URL."/admin/images/article_default.jpg";?>" width="100%" id="imgFeature-4" alt="Ảnh đại diện"/>
					<?php }?>
						<input class="btnSelectImage button" type="button" onclick="BrowseServer(5);" value="Chọn ảnh"/>
						<input class="btnDeleteImage button" type="button" value="Xóa ảnh"/>
						<input type="hidden" name="image[]" value="<?php echo $arrImages[4];?>" id="hdImage-5"/>
					</div>
					
				</div>
				<div style="margin-top: 5px;">
					<input id="btnAddImage" class="button" type="button" value="Thêm ảnh"/>
				</div>
				
			</div>
		</div>
		<div class="row">
			<input type="submit" class="button" value="Lưu"/>
			<input type="reset" class="button" value="Làm lại"/>
 		</div>
	</div>
</form> 	